<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0.5, maximum-scale=10.0,user-scalable=yes">
    <link rel="stylesheet" type="text/css" href="style2.css">
    <title>LZU CATS</title>
</head>
<!-- 
1.”通知公告”字体实现不断左右平移
javascript动画库实现

2.最后的栏目有两个鼠标悬浮时变色同时上下跳动的按钮框
Css+javascript动画库实现 
-->
<body>
    <div id="title">通知公告</div>

    <script src="anime/anime.min.js"></script>
    <script>
        anime({
        targets: '#title',
        translateX: 500,
        direction: 'alternate',
        loop: true,
        easing: 'steps(5)'
        });
    </script>

    <div class="info" style="background:#3767d5; color:#fff;  border: 4px #fff solid;">
      <div style="margin-top: 30px; font-size: 50pt; margin-right:200px; width: 100%; height:180px; line-height:60pt; text-align:right;">领养活动&nbsp&nbsp&nbsp&nbsp<br>给猫咪一个温暖的家&nbsp&nbsp&nbsp&nbsp</div>
      <div class="divbox">
        <div class="text" style="color:#fff;">
            <span style="height:30%; width:100%; font-size:25pt; line-height:30pt;">&nbsp&nbsp&nbsp&nbsp&nbsp送养&nbsp|&nbsp叮~您有一只待领养的甲骨！</span><br><br>
            &nbsp&nbsp&nbsp&nbsp&nbsp基本信息：小公猫,3-4岁<br>
            &nbsp&nbsp&nbsp&nbsp&nbsp外貌：微胖、黑白花纹、嘴上自带小口罩、屁屁上有米奇花纹<br>
            &nbsp&nbsp&nbsp&nbsp&nbsp身体状况：健康、已完成部分疫苗注射<br>
            &nbsp&nbsp&nbsp&nbsp&nbsp领养人要求：领养人得真心爱猫猫，不只是出于喜欢，还需要关心、呵护猫猫，有始有终，对喵负责。<br>
            <div class="button_more">了解更多</div>
        </div>
        <div class="pic" style="border-left:4px #fff solid; background:url(images/p2_n1.jpg);"></div>
      </div>
    </div>
    
    <div class="info" style="background:#275a5d; color:#f8bfb6; margin-top:-50px;  border: 4px #f8bfb6 solid;">
      <div style="margin-top: 30px; font-size: 50pt; margin-right:200px; width: 100%; height:180px; line-height:60pt; text-align:right;">猫猫绝育诱捕行动&nbsp&nbsp&nbsp&nbsp<br>控制流浪猫数量刻不容缓&nbsp&nbsp&nbsp&nbsp</div>
      <div class="divbox">
        <div class="text" style="color:#fff;">
            <span style="height:30%; width:100%; font-size:25pt; line-height:30pt;">&nbsp&nbsp&nbsp&nbsp&nbsp绝育快报&nbsp|&nbsp受害喵抓捕名单</span><br><br>
            &nbsp&nbsp&nbsp&nbsp&nbsp流浪猫绝育不仅可以防止更多流浪猫的诞生，减少猫猫死亡，还可以有效降低流浪猫危险系数，减少猫咪互殴现象。<br>
            &nbsp&nbsp&nbsp&nbsp&nbsp因而，我们希望可以尽自己最大的努力给予校园里的毛孩子们更多的轻松与安逸，而目前我们能为它们做的极具意义的事便是——绝育手术。<br>
            &nbsp&nbsp&nbsp&nbsp&nbsp成果反馈：目前，送往医院的五只猫猫已成功绝育，且术后没有任何应激或问题出现。<br>
            <div class="button_more">了解更多</div>
        </div>
        <div class="pic" style="border-left:4px #fff solid;"><img src="images/p2_n2.jpg" width="744px" height="500px" alt=""/></div>
      </div>
    </div>

    <div class="info" style="background:#f7debf; color:#fe5a00; margin-top:-50px;   border: 4px #fe5a00 solid;">
      <div style="margin-top: 30px; font-size: 50pt; margin-right:200px; width: 100%; height:180px; line-height:60pt; text-align:right;">宣传活动&nbsp&nbsp&nbsp&nbsp<br>努力扩大猫猫人群体数量&nbsp&nbsp&nbsp&nbsp</div>
      <div class="divbox">
        <div class="text" style="color:#fff;">
            <span style="height:30%; width:100%; font-size:25pt; line-height:30pt;">&nbsp&nbsp&nbsp&nbsp&nbsp九月&nbsp|“有所丰收有所贫”</span><br><br>
            &nbsp&nbsp&nbsp&nbsp&nbsp九月猫协宣传最大的成就是发布LZU猫谱小程序<br>
            &nbsp&nbsp&nbsp&nbsp&nbsp截止今天，猫谱上猫口有78只,虽然有许多只猫早已去了猫星，但他们至少来过兰大。<br>
            &nbsp&nbsp&nbsp&nbsp&nbsp“堂主的守护者”（官Q）的好友由349位增至400位猫猫人,说说也从152条增加至197条。<br>
            &nbsp&nbsp&nbsp&nbsp&nbsp“兰大猫协”（公众号）关注人数有361人,欢迎大家的关注。<br>
            <div class="button_more">了解更多</div>
        </div>
        <div class="pic" style="border-left:4px #fff solid;"><img src="images/p2_n3.jpg" width="744px" height="500px" alt=""/></div>
      </div>
    </div>
    
    <div class="info" style="background:#D31; color:#fff; margin-top:-50px;   border: 4px #FFF solid;">
      <div style="margin-top: 30px; font-size: 50pt; margin-right:200px; width: 100%; height:180px; line-height:60pt; text-align:right;">文创公益售卖活动&nbsp&nbsp&nbsp&nbsp<br>为猫队资金献力&nbsp&nbsp&nbsp&nbsp</div>
      <div class="divbox">
        <div class="text" style="color:#fff;">
            <span style="height:30%; width:100%; font-size:25pt; line-height:30pt;">&nbsp&nbsp&nbsp&nbsp&nbsp周边&nbsp|&nbsp猫猫人团队策划文创公益售卖</span><br><br>
            &nbsp&nbsp&nbsp&nbsp&nbsp校园众多猫咪的猫粮、猫窝、绝育、医药等，都是猫队同学筹措资金并负荷的。<br>
            &nbsp&nbsp&nbsp&nbsp&nbsp为了给猫队添加进项,猫猫人们组织策划了这次的文创公益售卖活动<br>
            &nbsp&nbsp&nbsp&nbsp&nbsp文创贩卖的收入全部被收为猫队资金，用于后续对猫猫们的照料，因此参与人员都是没有报酬的。<br>
            &nbsp&nbsp&nbsp&nbsp&nbsp活动目前告一段落,感谢同学们的支持。<br>
            <div class="button_more">了解更多</div>
        </div>
        <div class="pic" style="border-left:4px #fff solid;"><img src="images/p2_n4.jpg" width="744px" height="500px" alt=""/></div>
      </div>
    </div>
        
    <div class="info" style="background:#290038; color:#f9d3fa; margin-top:-50px;  border: 4px #f9d3fa solid;">
      <div style="margin-top: 30px; font-size: 50pt; margin-right:200px; width: 100%; height:180px; line-height:60pt; text-align:right;">招募活动&nbsp&nbsp&nbsp&nbsp<br>加入猫猫人团队为猫咪献上一份力&nbsp&nbsp&nbsp&nbsp</div>
      <div class="divbox">
        <div class="text" style="color:#fff;">
            <span style="height:30%; width:100%; font-size:25pt; line-height:30pt;">&nbsp&nbsp&nbsp&nbsp&nbsp急招募&nbsp|&nbsp快来加入猫猫人大队吧~</span><br><br>
            &nbsp&nbsp&nbsp&nbsp&nbsp我们是兰大猫队，一个兰大民间保护流浪猫的学生组织。2021年11月成立以来，我们猫队逐渐发展壮大，流浪猫救助群从两位数增至现在的八百多人。<br>
            &nbsp&nbsp&nbsp&nbsp&nbsp现在，猫队遇到了很大的问题：最初创建猫队的同学有的毕业有的退出，而且目前学校新增二十多只幼猫，急需同学加入我们。<br>
            &nbsp&nbsp&nbsp&nbsp&nbsp兰大猫猫需要你！兰大猫协需要你！快来加入吧!<br>
            <div class="button_more">了解更多</div>
        </div>
        <div class="pic" style="border-left:4px #fff solid;"><img src="images/p2_n5.jpg" width="744px" height="500px" alt=""/></div>
      </div>
    </div>

    <div style="width:100%; height:500px; border-radius:50px 50px 0 0;font-size: 25pt;background:#fff; color:rgb(36,80,107); margin-top:-50px;  border: 4px rgb(36,80,107) solid;">
        <div class="content">了解更多校园猫咪公告：<br>关注兰大猫协会，每日分享猫咪动态新闻。</div>
        <div id="button1" class="hvr-back-pulse">QQ群:489929429</div>
        <div id="button2" class="hvr-back-pulse">微信公众号:兰大猫协</div>
    </div>

    <script>
       var b1=document.getElementById("button1");
       var b2=document.getElementById("button2");
       var a1=anime({
                targets: b1,
                translateY: '50px',
                duration: 300,
                loop: true,
                autoplay:false,
                direction: 'alternate',
                easing: 'easeInCubic'
            });
        var a2=anime({
                targets: b2,
                translateY: '50px',
                duration: 300,
                loop: true,
                autoplay:false,
                direction: 'alternate',
                easing: 'easeInCubic'
            });
        b1.onmouseover=a1.play;
        b1.onmouseout=a1.pause;
        b2.onmouseover=a2.play;
        b2.onmouseout=a2.pause;
    </script>

    <div class="footer">    <!--底部-->
        <div class="footlogo"><img src="images/logo.jpg" width="124px" height="82px" alt=""/></div>
            <div class="foottext">
                <div style="height:63px; width:100%; margin-bottom: 9px;">
                <img src="images/LZUlogo.svg" width="200" height="60" alt="兰州大学">
                </div>
                <div class="foottext2">加入我们 &nbsp;｜ &nbsp; 联系我们</div>
                甘肃省兰州市天水南路222号 &nbsp;|&nbsp; 邮编: 730000<br>
                兰大猫咪 ZLU CATS.COM ALL RIGHTS RESERVED 
            </div>
    </div>
</body>
</html> 